<template>
  <div class="sub-category">
    <div class="container">
      <!-- 组件化 -->
      <!-- 面包屑 -->
      <SubBread />
      <!-- 筛选条件 -->
      <SubFilter />
      <div class="goods-list">
        <!-- 排序组件 -->
        <SubSort />
        <!-- 商品列表组件 -->
        <SubList />
      </div>
    </div>
  </div>
</template>

<script>
import { findSubCategoryFilter } from '@/api/category'
import { onMounted, provide, ref } from 'vue'
import { useRoute } from 'vue-router'
import SubBread from './components/sub-bread.vue'
import SubFilter from './components/sub-filter.vue'
import SubSort from './components/sub-sort.vue'
import SubList from './components/sub-list.vue'

export default {
  name: 'SubCategory',
  components: {
    SubBread,
    SubFilter,
    SubSort,
    SubList
  },
  setup () {
    // 路由信息对象
    const route = useRoute()
    // 二级分类数据
    const subCategoryData = ref({})
    // 注入依赖 -> 顶层注入一次,下面的子孙都可以使用
    provide('subCategoryData', subCategoryData)
    // 获取二级分类数据
    const getSubCategoryData = async () => {
      const { result } = await findSubCategoryFilter(route.params.id)
      // 添加筛选条件默认全部条件数据和选中状态数据
      // 1- 品牌
      // 后台品牌都添加一个是否选中的属性 -> false
      result.brands.forEach((brand) => {
        brand.selected = false
      })
      // 自己添加的全部条件, 默认选中
      result.brands.unshift({
        id: null,
        name: '全部',
        selected: true
      })
      // 2- 属性
      result.saleProperties.forEach((prd) => {
        prd.properties.forEach((per) => {
          per.selected = false
        })
        prd.properties.unshift({
          id: null,
          name: '全部',
          selected: true
        })
      })
      console.log(result)
      subCategoryData.value = result
    }

    // 提供过滤条件数据 (列表后台接口需要的条件)
    /**
     * 列表过滤/筛选(联动) (组件化) 实现步骤
     * 1- 在 vuex 或者使用依赖注入, 提供过滤条件的数据(共享)
     * 2- 在过滤条件的组件中获取上一步中提供的过滤条件的数据 -> 点击过滤条件, 修改过滤条件的数据
     * 3- 在列表组件中获取上一步中提供的过滤条件的数据 -> watch监听过滤条件的修改变化, 拿到最新修改的过滤条件的参数,从新请求列表数据
     */
    const filterParams = ref({
      sortField: null, // 排序类别
      attrs: [], // 商品属性
      brandId: null // 品牌名称
    })
    // 注入过滤条件数据
    provide('filterParams', filterParams)

    onMounted(() => {
      getSubCategoryData()
    })
  }
}
</script>
<style scoped lang='less'>
.goods-list {
  background: #fff;
  padding: 0 25px;
  margin-top: 25px;
}
</style>
